import { useTranslation } from "react-i18next";
import LanguageSwitcher from "./LanguageSwitcher";
import skillsData from "./data/skills.json";
import managementData from "./data/management.json";
import projectsData from "./data/projects.json";
import contactData from "./data/contact.json";
import { useEffect } from "react";
import { Link } from "react-router-dom";

function Home() {
  const { t } = useTranslation();
  useEffect(() => {
    fetch("/tj/track")
      .then((res) => res.json())
      .then(console.log)
      .catch(console.error);
  }, []);

  return (
    <div className="app">
      <LanguageSwitcher />
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-background">
          <div className="gradient-orb orb-1"></div>
          <div className="gradient-orb orb-3"></div>
        </div>

        <div className="hero-content">
          <h1 className="hero-title">
            <span className="gradient-text">{t("hero.title")}</span>
          </h1>
          <p className="hero-subtitle">{t("hero.subtitle")}</p>
          <p className="hero-description">{t("hero.description")}</p>

          <div className="hero-stats">
            <div className="stat-item">
              <div className="stat-number">10+</div>
              <div className="stat-label">{t("hero.stats.experience")}</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">50+</div>
              <div className="stat-label">{t("hero.stats.projects")}</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">100%</div>
              <div className="stat-label">{t("hero.stats.passion")}</div>
            </div>
          </div>

          <div className="hero-actions">
            <Link to="/resume" className="btn-primary">
              {t("hero.viewResume", "查看简历")}
            </Link>
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section className="skills">
        <h2 className="section-title">{t("skills.title")}</h2>

        <div className="skills-grid">
          {skillsData.map((skill) => (
            <div key={skill.id} className="skill-card">
              <div className="skill-icon">{skill.icon}</div>
              <h3>{t(skill.titleKey)}</h3>
              <div className="skill-tags">
                {skill.tags.map((tag) => (
                  <span key={tag} className="tag">
                    {tag}
                  </span>
                ))}
              </div>
              <p>{t(skill.descriptionKey)}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Management Section */}
      <section className="management">
        <h2 className="section-title">{t("management.title")}</h2>

        <div className="management-grid">
          {managementData.map((item) => (
            <div key={item.id} className="management-card">
              <div className="management-icon">{item.icon}</div>
              <h3>{t(item.titleKey)}</h3>
              <div className="management-tags">
                {item.tags.map((tag) => (
                  <span key={tag} className="tag-management">
                    {tag}
                  </span>
                ))}
              </div>
              <p>{t(item.descriptionKey)}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Projects Section */}
      <section className="projects">
        <h2 className="section-title">{t("projects.title")}</h2>

        <div className="projects-grid">
          {projectsData.map((project) => (
            <div
              key={project.id}
              className="project-card"
              onClick={() => project.url && window.open(project.url, "_blank")}
            >
              <div className="project-header">
                <h3>{t(project.titleKey)}</h3>
                <span className="project-type">{t(project.typeKey)}</span>
              </div>
              <p className="project-description">{t(project.descriptionKey)}</p>
              <div className="project-tech">
                {project.technologies.map((tech) => (
                  <span key={tech}>{tech}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Contact Section */}
      <section className="contact">
        <div className="contact-content">
          <h2 className="section-title">{t("contact.title")}</h2>
          <p className="contact-description">{t("contact.description")}</p>

          <div className="contact-info">
            <a
              href={`mailto:${contactData.email}`}
              className="info-item"
              title="发送邮件"
            >
              <span className="info-icon">📧</span>
              <span className="info-text">{contactData.email}</span>
            </a>
            <a
              href={`tel:${contactData.phone}`}
              className="info-item"
              title="拨打电话"
            >
              <span className="info-icon">📱</span>
              <span className="info-text">{contactData.phone}</span>
            </a>
            <a
              href={`https://api.map.baidu.com/geocoder?address=${encodeURIComponent(
                contactData.location
              )}&output=html`}
              target="_blank"
              rel="noopener noreferrer"
              className="info-item"
              title="在地图中查看"
            >
              <span className="info-icon">📍</span>
              <span className="info-text">{contactData.location}</span>
            </a>
          </div>

          <div className="availability-badge">
            <span className="status-dot"></span>
            <span className="status-text">
              {contactData.availability.status}
            </span>
          </div>
          <p className="availability-description">
            {contactData.availability.description}
          </p>

          <div className="social-links">
            {contactData.socialMedia.map((social) => (
              <a
                key={social.name}
                href={social.url}
                target="_blank"
                rel="noopener noreferrer"
                className="social-link"
                style={{ borderColor: social.color }}
              >
                <span>{social.name}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        <p>{t("footer.copyright")}</p>
      </footer>
    </div>
  );
}

export default Home;
